---
description: Build a chart in 5 minutes
---

import Link from '@docusaurus/Link';
import BrowserOnly from '@docusaurus/BrowserOnly'
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import {
  reactImport,
  angularImport,
  svelteImport,
  vueImport,
  solidImport,
  tsImport,
  reactIndividualImport,
  angularIndividualImport,
  svelteIndividualImport,
  vueIndividualImport,
  solidIndividualImport,
  tsIndividualImport,
  reactLineChartCode,
  angularLineChartCode,
  svelteLineChartCode,
  vueLineChartCode,
  solidLineChartCode,
  tsLineChartCode,
  BasicLineChartExample,
} from './quick-start.snippets'

# Quick Start

### Component import
_Unovis_ is distributed in the format of [ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/).
After the library is [installed](/docs/intro#-install) you can simply import _Unovis_ components from `@unovis/...` packages:

<Tabs groupId="framework">
  <TabItem value="react" label="React" default children={reactImport}/>
  <TabItem value="angular" label="Angular" children={angularImport}/>
  <TabItem value="svelte" label="Svelte" children={svelteImport}/>
  <TabItem value="vue" label="Vue" children={vueImport}/>
  <TabItem value="solid" label="Solid" children={solidImport}/>
  <TabItem value="typescript" label="TypeScript" children={tsImport}/>
</Tabs>

You can import components individually as well:
<Tabs groupId="framework">
  <TabItem value="react" label="React" default children={reactIndividualImport}/>
  <TabItem value="angular" label="Angular" children={angularIndividualImport}/>
  <TabItem value="svelte" label="Svelte" children={svelteIndividualImport}/>
  <TabItem value="vue" label="Vue" children={vueIndividualImport}/>
  <TabItem value="solid" label="Solid" children={solidIndividualImport}/>
  <TabItem value="typescript" label="TypeScript" children={tsIndividualImport}/>
</Tabs>

:::info
_Unovis_ is tree-shakable! Based on our preliminary tests, regular package imports work as good as individual imports.
Unused components won't be included into your app's bundle!

Furthermore, heavy parts of the library like _Graph_ layouts or _LeafletMap_ dependencies support dynamic imports and
will be loaded on-the-fly after component initialization.
:::

### Line Chart with Axes

<BasicLineChartExample />
<Tabs groupId="framework">
  <TabItem value="react" label="React" default>

:::info
We'll use the [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)
and [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) hooks throughout
the documentation and examples extensively because that improves the performance of the
library by avoiding unnecessary rerenders.
:::

<>{reactLineChartCode}</>
  </TabItem>
  <TabItem value="angular" label="Angular" children={angularLineChartCode}/>
  <TabItem value="svelte" label="Svelte" children={svelteLineChartCode}/>
  <TabItem value="vue" label="Vue" children={vueLineChartCode}/>
  <TabItem value="solid" label="Solid" children={solidLineChartCode}/>
  <TabItem value="typescript" label="TypeScript" children={tsLineChartCode}/>
</Tabs>


